﻿define([
    'Wjs/ui/widgets/Dialog',
    'Wjs/ui/elements/Html'
],
function () {
    'use strict';

    return Wjs.defineOnce({

        type: 'messageBox',

        internal: {

            'static': true,

            initialize: function () {

                this.setDefaultWidth(300);

                this.dialog = Wjs.new('Dialog')

                    //.setClosable() It is by default

                    .addButton('ok')

                    .render();

                //    movable: true,

            },

            // For static types this is fired when the instance is created
            onTypeDefined: function (messageBox) {

                Wjs.alert = function () {

                    // Clear the width if previously set
                    messageBox.dialog.removeStyleProperty('width');

                    if (messageBox.defaultWidth) {

                        messageBox.setWidth(messageBox.defaultWidth);
                    }

                    return messageBox;
                };
            }
        },

        setTitle: function (title) {

            this.dialog.setTitle(

                Wjs.new('Html')

                    .setHtml(title)
            );

            return this;
        },

        setContent: function (content) {

            if (!Wjs.isJSON(content)) {

                content = '<div>' + content + '</div>'; // Assume HTML and enclose it as a single child so it won't throw arrors when added to the HTML element as multiple nodes
            }

            this.dialog.addBodyItem(

                Wjs.new('Html')

                    .setHtml(content)
            );

            return this;
        },

        setDefaultWidth: function (width) {

            this.defaultWidth = width;

            return this;
        },

        setWidth: function (width) {

            this.dialog.setWidth(width);

            return this;
        },

        show: function () {

            // TODO; Add some animation to show the transition among different alerts since it is the same dialog
            this.dialog.show();

            return this;
        },

        onOk: function (fcn) {

            this.dialog.onOk(fcn);

            return this;
        },

        onCancel: function (fcn) {

            this.dialog.onCancel(fcn);

            return this;
        }

    });

});